<template>
  <div class="center">
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand">{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
              <el-input
                style="width: 136px;"
                size="small"
                placeholder="请输入内容"
                v-model.trim="inputValue"
                @keyup.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
              <div style="margin-left: 5px;">
                <el-button
                  class="check"
                  @mousedown.native="perfectDown"
                  @mouseup.native="perfectUp"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  v-if="jiaofu"
                  round
                  @click="perfectClick"
                >完善
                </el-button>
                <el-button
                  class="add"
                  :class="{'active' : newcolor}"
                  v-if="jiaofu"
                  size="small"
                  @mousedown.native="giveUpDown"
                  @mouseup.native="giveup"
                  @click="giveUpClick"
                  round
                >放弃
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @current-change="handleCurrentChange"
            class="tableT"
          >
            <el-table-column prop="customerName" label="客户名称"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="pusherName" v-if="recommend" label="推荐人"></el-table-column>
            <el-table-column prop="postName" label="入职职位"></el-table-column>
            <el-table-column prop="postLevel" label="职位级别"></el-table-column>
            <el-table-column prop="area" label="入职地区"></el-table-column>
            <el-table-column prop="education" label="学历"></el-table-column>
            <el-table-column prop="phone" label="联系电话"></el-table-column>
            <el-table-column prop="mail" label="邮箱"></el-table-column>
            <el-table-column label="入职时间">、
              <template slot-scope="scope">
                <!-- prop="name" -->
                <span v-if="scope.row.realEntryScore == null">{{scope.row.entryTime}}</span>
                <span v-else>{{scope.row.entryTime+scope.row.realEntryScore}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="realEntryTime" label="实际入职情况"></el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何候选人</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="giveUpdialogVisible"
      width="30%"
      :before-close="handleGiveUpClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">该候选人确定放弃入职？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="giveUpConfirm">确 定</el-button>
        <el-button round @click="handleGiveUpClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="完善"
      class="addP"
      :visible.sync="dialogPeopleVisible"
      width="415px"
      :before-close="cancelPeopleEdit"
    >
      <div>
        <el-form :model="form" class="formList" :rules="rules" ref="formU" label-position="top">
          <el-form-item label="实际入职情况" prop="isOnTime">
            <el-radio v-model="form.isOnTime" @change="radiochange" label="1">准点</el-radio>
            <el-radio v-model="form.isOnTime" @change="radiochange" label="2">晚点</el-radio>
          </el-form-item>
          <el-form-item label="入职公司" prop="company">
            <el-input v-model.trim="form.company" placeholder="请输入入职公司"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input v-model.trim="form.department" placeholder="请输入入职部门"></el-input>
          </el-form-item>
          <el-form-item label="进场时间" prop="entryTime" v-if="form.isOnTime == '2'">
            <el-date-picker
              width="100%"
              v-model="form.entryTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              placeholder="请选择进场时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="editTimePeoplePost('formU')">确 定</el-button>
        <el-button round @click="cancelPeopleEdit" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  import tagsView from '../../store/modules/tagsView'
  
  export default {
    data() {
      return {
        title: "入职办理",
        inputValue: "",
        newcolor1: false,
        newcolor: false,
        recommend: false,
        jiaofu: true,
        tableData: [],
        currentRow: null,
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        errordialogVisible: false,
        dialogPeopleVisible: false,
        giveUpdialogVisible: false,
        form: {
          isOnTime: '',
          entryTime: null,
          company: '',
          department: ''
        },
        rules: {
          entryTime: [
            {required: true, message: "请选择进场时间", trigger: "change"}
          ],
          isOnTime: [
            {required: true, message: "请选择实际入职情况", trigger: "change"}
          ],
          'company': [
            {required: true, message: '请输入入职公司', trigger: 'blur'}
          ],
          'department': [
            {required: true, message: '请输入部门', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      if (tagsView.state.identity == 7) {
        this.jiaofu = false;
      }
      this.getData();
      axios.post(this.url + "/auth/getDataByMenu", {
        menuId: 24
      }).then(res => {
        this.unlogin(res.data.code)
        if (res.data.code == 200) {
          if (res.data.data.length > 0) {
            this.recommend = true;
          }
        }
      })
    },
    methods: {
      radiochange() {
        this.form.entryTime = '';
      },
      getData() {
        axios.post(this.url + "/handle/searchHandle", {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      searchMsg() {
        this.currentPage = 1;
        this.getData();
      },
      // 完善按钮点击
      perfectClick() {
        if (this.currentRow) {
          this.dialogPeopleVisible = true;
          document.documentElement.style.overflow = "hidden";
          axios.post(this.url + '/handle/getDetailByName', {
            entryTime: this.currentRow.entryTime,
            name: this.currentRow.name,
            phone: this.currentRow.phone
          }).then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.form = res.data.data;
            }
          })
        } else {
          this.errordialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      // 放弃按钮点击
      giveUpClick() {
        if (this.currentRow) {
          this.giveUpdialogVisible = true;
          document.documentElement.style.overflow = "hidden"
        } else {
          this.errordialogVisible = true;
          document.documentElement.style.overflow = "hidden"
        }
      },
      // 完善按钮按下
      perfectDown() {
        this.newcolor1 = true;
      },
      // 完善按钮弹起
      perfectUp() {
        this.newcolor1 = false;
      },
      //鼠标按下放弃按钮
      giveUpDown() {
        this.newcolor = true;
      },
      //点击按钮弹起
      giveup() {
        this.newcolor = false;
      },
      handleCurrentChange(val) {
        this.currentRow = val
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.getData();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.getData();
      },
      handleClose() {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = "auto"
      },
      cancelPeopleEdit() {
        this.dialogPeopleVisible = false;
        document.documentElement.style.overflow = "auto";
        this.$refs.formU.resetFields()
      },
      editTimePeoplePost(formName) {
        if (this.form.isOnTime == "2") {
          this.$refs[formName].validate(valid => {
            if (valid) {
              axios.post(this.url + "/handle/upHandle", qs.stringify({
                id: this.currentRow.id,
                isOnTime: this.form.isOnTime,
                upValue: this.form.entryTime,
                company: this.form.company,
                department: this.form.department
              })).then(res => {
                this.unlogin(res.data.code)
                if (res.data.code == 200) {
                  this.getData();
                  this.dialogPeopleVisible = false;
                  document.documentElement.style.overflow = "auto"
                  this.$refs.singleTable.setCurrentRow();
                  this.$refs[formName].resetFields();
                }
              })
            }
          })
        } else {
          this.$refs[formName].validate(valid => {
            if (valid) {
              axios.post(this.url + "/handle/upHandle", qs.stringify({
                id: this.currentRow.id,
                isOnTime: this.form.isOnTime,
                upValue: this.currentRow.entryTime,
                company: this.form.company,
                department: this.form.department
              })).then(res => {
                this.unlogin(res.data.code)
                if (res.data.code == 200) {
                  this.getData();
                  this.dialogPeopleVisible = false;
                  document.documentElement.style.overflow = "auto";
                  this.$refs.singleTable.setCurrentRow();
                  this.$refs[formName].resetFields();
                }
              })
            }
          })
        }
      },
      handleGiveUpClose() {
        this.giveUpdialogVisible = false;
        document.documentElement.style.overflow = "auto"
      },
      giveUpConfirm() {
        axios.post(this.url + "/handle/abandonHandle", qs.stringify({
          id: this.currentRow.id
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.getData();
            this.giveUpdialogVisible = false;
            document.documentElement.style.overflow = "auto"
            this.$refs.singleTable.setCurrentRow();
          }
        })
      }
    },
    watch: {
      "inputValue": function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.getData();
        }
      }
    }
  }
</script>
<style scoped>
  .hand {
    color: #1099ff;
  }
  
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .add {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    padding: 7px 15px !important;
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  .check {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    padding: 7px 15px !important;
  }
  
  .check:hover {
    color: #fff !important;
  }
  
  .active {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }
  
  .active1 {
    background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>
